<template>
  <div class="chart-panel">
    <div class="chart-header">
      <span class="title">{{ chartData.title }}</span>
      <div v-if="isEditing" class="actions">
        <el-button-group>
          <el-button type="primary" link @click="$emit('edit', chartData)">
            <el-icon><Edit /></el-icon>
          </el-button>
          <el-button type="danger" link @click="$emit('delete', chartData.i)">
            <el-icon><Delete /></el-icon>
          </el-button>
        </el-button-group>
      </div>
    </div>
    <div class="chart-content">
      <component 
        :is="chartComponents[chartData.type]"
        :chart-data="chartData"
        :height="contentHeight"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import LineChart from './charts/LineChart.vue';
import BarChart from './charts/BarChart.vue';
import PieChart from './charts/PieChart.vue';

defineProps({
  chartData: {
    type: Object,
    required: true
  },
  isEditing: {
    type: Boolean,
    default: false
  }
});

defineEmits(['edit', 'delete']);

const chartComponents = {
  line: LineChart,
  bar: BarChart,
  pie: PieChart
};

const contentHeight = computed(() => {
  return '100%';
});
</script>

<style lang="scss" scoped>
.chart-panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  
  .chart-header {
    height: 40px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    
    .title {
      font-size: 14px;
      color: #fff;
    }
  }
  
  .chart-content {
    flex: 1;
    padding: 10px;
  }
}
</style> 